from dash import html, dcc
import dash_bootstrap_components as dbc

# 登录界面布局 - 使用新的样式但保留原来的ID
layout = html.Div([
    dcc.Location(id='redirect-admin', refresh=True),
    html.Div([
        # 标题部分保持不变
        html.H2(
            [
                "黄浦区医疗设备",
                html.Br(),
                "智慧监控云平台",
                html.Br(),
                html.Br(),
                "用户登录"
            ], 
            style={
                "textAlign": "center", 
                "color": "#0d47a1", 
                "marginBottom": "20px",
                "whiteSpace": "pre-line"
            }
        ),
        
        # 用户名输入框
        html.Div([
            html.Label("用户名", style={"display": "block", "marginBottom": "5px","color": "#0d47a1"}),
            dcc.Input(
                id="username-input",
                type="text",
                placeholder="请输入用户名",
                style={
                    "width": "300px",
                    "padding": "8px",
                    "borderRadius": "4px",
                    "border": "1px solid #ddd"
                }
            ),
        ], style={
            "marginBottom": "15px",
            "textAlign": "center",  # 新增居中样式
            "width": "100%"          # 确保容器宽度
        }),
        
        # 密码输入框
        html.Div([
            html.Label("密码", style={"display": "block", "marginBottom": "5px","color": "#0d47a1"}),
            dcc.Input(
                id="password-input",  # 保持原来的ID
                type="password",
                placeholder="请输入密码",
                style={
                    "width": "300px",
                    "padding": "8px",
                    "borderRadius": "4px",
                    "border": "1px solid #ddd"
                }
            ),
        ], style={
            "marginBottom": "15px",
            "textAlign": "center",  # 新增居中样式
            "width": "100%"          # 确保容器宽度
            }),
        
        # 登录按钮
        html.Div([
            html.Button(
                "登 录",
                id="login-button",  # 保持原来的ID
                n_clicks=0,
                style={
                    "backgroundColor": "#0d47a1",
                    "color": "white",
                    "border": "none",
                    "padding": "10px 20px",
                    "borderRadius": "4px",
                    "cursor": "pointer",
                    "width": "200px"
                }
            ),
        ], style={"textAlign": "center", "width": "100%"}), # 新增的包裹Div和样式
        
        # 登录状态消息 - 确保ID与回调函数匹配
        html.Div(id="login-output", className="mt-3 text-center", style={"color": "black"})
    ],className="login-card",  style={
        "width": "400px",
        # "margin": "100px auto", # 将被父容器的flex居中替代
        "padding": "30px",
        "boxShadow": "0 4px 8px rgba(0,0,0,0.1)",
        "borderRadius": "8px",
        "backgroundColor": "rgba(220, 220, 220, 0.9)"  # 登录卡片的背景色，修改为灰色，透明度50%
    })
], style={
    # "backgroundColor": "#f5f7fa", # 移除或注释掉原来的背景色
    "backgroundImage": "url('/dash/assets/map/wt1.png')", # 修改这里的URL
    "backgroundSize": "cover", # 图片覆盖整个区域
    "backgroundPosition": "center", # 图片居中显示
    "backgroundRepeat": "no-repeat", # 图片不重复平铺
    "minHeight": "100vh", # 最小高度为整个视口高度
    "width": "100vw", # 宽度为整个视口宽度
    "display": "flex", # 使用flex布局
    "alignItems": "center", # 垂直居中
    "justifyContent": "center" # 水平居中
})